<template>
	<view>
		<view class="buttonGroup">
			<view @click="changeMode(1)" class='btn1 btnBox' :class="{active: model === 1}">收益明细</view>
			<view @click="changeMode(2)" class='btn2 btnBox' :class="{active: model === 2}">提现明细</view>
		</view>
		<u-tabs v-show="model === 1" :list="list" :is-scroll="false" active-color='#F4333C' :current="current"
			@change="change"></u-tabs>
<u-gap height="2" bg-color="#E3E3E3"></u-gap>
		<view class="listBox">
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="uni-input"><text class="timeSelect">{{date}}</text>
					<u-icon name="arrow-down" size="20"></u-icon>
				</view>
			</picker>

			<view class="listBox-item" v-for="item in showList" :key="item.id">
				<view class="item-title">{{item.title}}</view>
				<view class="item-content">
					<view class="item-content-left">
						<view class="orderCode" v-show="model===1">订单号：{{item.order}}</view>
						<view class="createTime">{{item.createTime}}</view>
					</view>
					<view class="item-content-right">{{model===2?'-':'+'}}{{item.price}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				model1Date: currentDate,
				model2Date: currentDate,
				model: 1,
				list: [{
					name: '全部'
				}, {
					name: '咨询'
				}, {
					name: '挂号',
				}, {
					name: '课程',
				}, ],
				current: 0,
				model2List: [{
						id: 'asd',
						title: '提现',
						price: '200',
						createTime: '2022-10-22 12:00:00'
					},
					{
						id: 'aasd',
						title: '提现',
						price: '300',
						createTime: '2022-10-22 12:00:00'
					},
					{
						id: 'afsd',
						title: '提现',
						price: '400',
						createTime: '2022-10-22 12:00:00'
					},
				],
				model1List: [{
						id: 'aaasd',
						title: '在线咨询',
						status: 2,
						order: 'asda1234',
						price: '200',
						createTime: '2022-10-22 12:00:00'
					},
					{
						id: 'asdff',
						title: '预约挂号',
						status: 3,
						order: 'a23sda1234',
						price: '300',
						createTime: '2022-10-22 12:00:00'
					},
					{
						id: 'asdfg',
						title: '课程售卖',
						status: 4,
						order: '12a1234',
						price: '400',
						createTime: '2022-10-22 12:00:00'
					},

				]
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			date() {
				if (this.model === 1) {
					return this.model1Date
				}
				if (this.model === 2) {
					return this.model2Date
				}
			},
			showList() {
				if (this.model === 2) {
					return this.model2List
				}
				if (this.model === 1) {
					if (this.current === 0) {
						return this.model1List
					}
					if (this.current === 1) {
						return this.model1List.filter(item => item.status === 2)
					}
					if (this.current === 2) {
						return this.model1List.filter(item => item.status === 3)
					}
					if (this.current === 3) {
						return this.model1List.filter(item => item.status === 4)
					}

				}
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			changeMode(index) {
				this.model = index;
				// 切换后调用接口请求对应栏目的数据
				// 收益明细的数据直接请求全部就行,然后通过筛选获取其他栏目的类型
			},
			bindDateChange: function(e) {
				if (this.model === 1)
					this.model1Date = e.detail.value
				if (this.model === 2)
					this.model2Date = e.detail.value

				// 这里写切换日期请求数据

			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listBox {
		background-color: #fff;
		padding: 30rpx;

		.timeSelect {
			margin-right: 10rpx;
		}

		.listBox-item {
			border-bottom: 1px solid #E3E3E3;
			padding: 30rpx 0;

			.item-title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 24rpx;
			}

			.item-content {
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;

				.item-content-left {
					color: #666666;

					.orderCode {
						margin-bottom: 24rpx;
					}
				}

				.item-content-right {
					// margin: 24rpx 0;
					font-size: 40rpx;
					color: #F4333C;
					font-weight: bold;
				}
			}

		}
	}

	.buttonGroup {
		margin: 40rpx auto;
		width: 400rpx;
		height: 70rpx;
		display: flex;

		.btnBox {
			height: 100%;
			border-radius: 0;
			flex: 1;
			background-color: #fff;
			color: red;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid red;
		}

		.btnBox.active {
			background-color: red;
			color: #fff;
		}

		.btn1 {
			border-top-left-radius: 60rpx;
			border-bottom-left-radius: 60rpx;
		}

		.btn2 {
			border-top-right-radius: 60rpx;
			border-bottom-right-radius: 60rpx;
		}

	}
</style>
